<template>
    <div class="table-header-content">
        <div class="flex-jc-s-b" style="flex-wrap: wrap;">
            <div class="margin-r-20px flex margin-t-10px">
                <slot name="customSearch"></slot>
                <div v-for="item, index in operationItem.SearchItem" class="margin-r-10px">
                    <el-input v-if="item.type == 'input' && !item.closeSearch" clearable
                        v-model="pageInfo.request[item.code]" :placeholder="item.name" />
                    <el-select v-if="item.type === 'select' && !item.closeSearch" :placeholder="item.name"
                        v-model="pageInfo.request[item.code]" :clearable="!item.closeClearable" filterable>
                        <el-option v-for="option in item.options" :label="option[item.label] || option.label"
                            :value="option[item.value] || option.value">
                        </el-option>
                    </el-select>
                    <!-- :size="‘default"  -->
                    <el-date-picker v-if="(item.type === 'daterange' || item.type === 'date') && !item.closeSearch"
                        @change="handleDateRange($event, item.code)" v-model="pageInfo.request[item.code]" :type="item.type"
                        :placeholder="item.placeholder || '请选择日期'" :value-format="item.valueFormat || 'YYYY-MM-DD'"
                        :range-separator="item.rangeName || '至'" :start-placeholder="item.startName || '开始时间'"
                        :end-placeholder="item.endName || '结束时间'" />
                    <el-cascader v-if="item.type === 'cascader'" :placeholder="item.name"
                        v-model="pageInfo.request[item.code]" :clearable="!item.closeClearable" :options="item.options"
                        :props="item.props" filterable @change="item.change">
                    </el-cascader>
                </div>
            </div>
            <div class="flex margin-t-10px">
                <el-button v-if="operationItem.defaultSearch" type="primary" :icon="Search" @click="pageInfo.paging">{{
                    operationItem.SearchText || '搜索' }}</el-button>
                <el-button v-if="operationItem.defaultRefresh" :icon="Refresh" @click="pagingRefresh">{{
                    operationItem.RefreshText || '重置' }}</el-button>
                <div class="margin-l-10px" v-for="btItem in props.operationItem.menuArray">
                    <el-button v-hasPermi="btItem.hasPermi || []" :type="btItem.type || ''" :size="btItem.size || ''"
                        :disabled="btItem.disabled" v-if="btItem.show" :icon="btItem.icon"
                        @click="btItem.handle(btItem.customParameters)">{{
                            btItem.text || "请添加按钮签名" }}
                    </el-button>
                </div>
            </div>
        </div>
    </div>
    <div style="padding: 0px 20px 10px 20px;" v-if="operationItem.customTableHeader">
        <slot name="customTableHeader"></slot>
    </div>
</template>

<script setup>
import { Delete, Edit, Search, Share, Refresh } from '@element-plus/icons-vue'
import { onMounted, ref, useSlots, watch } from 'vue'
import { ElMessage } from 'element-plus'
import router from '@/router'
import { useRouter, useRoute } from 'vue-router'
const route = useRoute()
const slots = useSlots()
const props = defineProps({
    pageInfo: {
        default: function () {
            return {
                paging: function () {
                    ElMessage.warning('请传入设置函数paging')
                },
            }
        }
    },
    operationItem: {
        default: function () { return {} }
    },

})
watch(() => { return route.path }, () => {
    props.pageInfo.request = requestSave;
}, {})
let requestSave = {}
const pagingRefresh = () => {
    props.pageInfo.request = requestSave; props.pageInfo.paging()
}
function handleDateRange(dateArr, code) {
    if (typeof code == 'string' || !code) { return }

    if (dateArr && dateArr.length > 0) {
        props.pageInfo.request[code[0] || 'createDateStart'] = dateArr[0]
        props.pageInfo.request[code[1] || 'createDateEnd'] = dateArr[1]
    } else {
        props.pageInfo.request[code[0] || 'createDateStart'] = null
        props.pageInfo.request[code[1] || 'createDateEnd'] = null
    }

}

onMounted(() => {
    props.operationItem.SearchItem.map((item) => {
        item.valueInit ? props.pageInfo.request[item.code] = item.valueInit : ''
    })
    requestSave = JSON.parse(JSON.stringify(props.pageInfo.request))
})
</script>

<style lang="scss" scoped>
.table-header-content {
    //top留10px 给flex换行
    padding: 10px 20px 20px 20px;
}
</style>
